<template>
	<view class="r-main">
		<view class="r-header text-center text-bold">请输入手机号</view>
		<view class="r-list">
			<view class="r-item pl-lg pr-lg flex fill-body radius-16 mb-sm">
				<input type="number" @input="getInput" v-model="subForm.phone" class="flex-1 f-min-title"
					placeholder="请输入手机号" />
			</view>
			<view class="a-btn c-base f-title text-center radius-16 mb-lg mt-lg" @tap="toLogin"
				:style="{backgroundColor:primaryColor,opacity: isCheck ? 1 : 0.3}">下一步</view>
			<view class=" flex-center pb-sm">
				<view class="flex" @tap="isCheck = !isCheck ">
					<view class="icon-xuanze iconfont c-caption" v-if="!isCheck"></view>
					<view class="iconjishiwancheng iconfont" v-else :style="{color:primaryColor}"></view>
					<view class="f-caption box-text pl-sm">
						<text>注册即表示您已详细阅读并同意</text><text :style="{color:primaryColor}" @tap.stop="goDetail(1)">《用户隐私协议》</text><text>与</text>
						<text :style="{color:primaryColor}" @tap.stop="goDetail(2)">《个人信息保护指引》</text>
					</view>
				</view>
			</view>
		</view>
		<!-- <pwPopup ref="pwpopup" :text="[{type:'close',text:'取消'},{type:'confirm',text:'同意'}]" @confirm="confirm">
			<text>注册即表示您已详细阅读并同意</text><text :style="{color:primaryColor}">《用户协议》</text><text>于</text>
			<text :style="{color:primaryColor}">《个人信息保护指引》</text>
		</pwPopup> -->
	</view>
</template>

<script>
	import siteInfo from '@/siteinfo.js';
	import {
		mapState,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				isCheck: false,
				subForm: {
					phone: ''
				},
				rule: [{
					name: "phone",
					checkType: "isMobile",
					errorMsg: "请输入手机号",
					regText: "手机号"
				}],
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			location: state => state.user.location,
		}),
		methods: {
			//表单验证
			validate(param) {
				let validate = new this.$util.Validate();
				this.rule.map(item => {
					let {
						name,
					} = item
					validate.add(param[name], item);
				})
				let message = validate.start();
				return message;
			},
			getInput(e) {
				this.$nextTick(function() {
					this.subForm.phone = e.detail.value.replace(/\D/g, '')
				})
			},
			toLogin() {
				//this.$refs.pwpopup.open()
				if(!this.isCheck) return
				this.confirm()
				
			},
			async confirm() {
				let param = this.$util.deepCopy(this.subForm)
				let msg = this.validate(param);
				if (msg) {
					this.$util.showToast({
						title: msg
					})
					return
				}
				if (this.lockTap) return
				this.lockTap = true
				this.$util.showLoading()
				try {
					await this.$api.login.sendShortMsg(param)
					this.$util.hideAll()
					this.lockTap = false
					setTimeout(() => {
						this.$util.goUrl({
							url: `/login/pages/phone-code?phone=${param.phone}`
						})
					}, 1000)
				} catch (e) {
					setTimeout(() => {
						this.lockTap = false
						this.$util.hideAll()
					}, 2000)
				}
				//this.$refs.pwpopup.close()
			},
			goDetail(type) {
				let {
					siteroot
				} = siteInfo
				let href = siteroot.split('index.php')[0]
				let page = type == 1 ? 'protocol' : 'information'
				let url = `${href}${page}.html`
				this.$util.goUrl({
					url,
					openType: 'web'
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;
	}

	.r-header {
		font-size: 54rpx;
		padding: 100rpx 0;
	}

	.r-list {
		padding: 0 60rpx;

		.r-item {
			input {
				height: 110rpx;
			}
		}

		.a-btn {
			height: 110rpx;
			line-height: 110rpx;
		}

		.box-text {
			letter-spacing: 1px;
			line-height: 32rpx;
			color: #6C727F;
		}
	}
</style>
